import {memo, useState} from "react";
import RankingListStyle from "./RankingListStyle";
import {Button} from "antd";
type propsType={

}
export default memo(function RankingList(props:propsType) {
  const leftNavbarList=["飙升榜","热歌榜","新歌榜","流行指数榜",""];
  //当前被选中的侧边栏索引
  const [currentLeftNavbarIndex,setCurrentLeftNavbarIndex]=useState(0)
  const musicList=[
    {
      musicName:"偷心",
      singName:"张学友",
      timer:"3:00",
    },
    {
      musicName:"水月",
      singName:"撒旦撒",
      timer:"3:54",
    },
    {
      musicName:"按市场",
      singName:"时发现",
      timer:"3:10",
    },
    {
      musicName:"愿你满目星辰",
      singName:"空空",
      timer:"3:51",
    },
    {
      musicName:"撒子",
      singName:"从v吧",
      timer:"3:34",
    },
    {
      musicName:"啊啊撒",
      singName:"安安",
      timer:"4:12",
    },
    {
      musicName:"叙述",
      singName:"许嵩",
      timer:"3:45",
    },
  ];
  // 是否显示批量操作按钮
  const [isShowBatchBtn,setIsShowBatchBtn]=useState(false);

  return (
    <RankingListStyle>
    {/*
      这里的侧边栏我们暂时不抽成一个组件了
    */}
      <ul className="ranking-list-left-box">
        <li className="left-box-title-li">巅峰榜</li>
        {
          leftNavbarList.map((item,index)=>{
            return(<li
              key={item}
              className={`${currentLeftNavbarIndex===index?"current-left-box-li":""} left-box-li`}
              onClick={()=>{
                setCurrentLeftNavbarIndex(index);
              }}
            >
              {item}
            </li>)
          })
        }
      </ul>
      <div className="ranking-list-right-box">
        <h3>流行指数榜</h3>
        <div className="rankgin-head-btn-box">
          <Button className="iconfont rankgin-head-btn select-btn" >&#xe87c; 播放全部</Button>
          <Button className="iconfont rankgin-head-btn">&#xe604; 添加到</Button>
          <Button className="iconfont rankgin-head-btn">&#xe606; 下载</Button>
          <Button className="iconfont rankgin-head-btn" onClick={()=>{
            setIsShowBatchBtn(!isShowBatchBtn);
          }}>&#xe670; {isShowBatchBtn?"取消批量操作":"批量操作"}</Button>
          <Button className="iconfont rankgin-head-btn">&#xe891; 评论</Button>
        </div>

        {/** 表格数据*/}
        <table className="music-table">
          <thead>
          <tr>
            <th className="table-title" style={{display:isShowBatchBtn?"inline-block":"none"}}>
              <input className="music-checkbox" type="checkbox"/>
            </th>
            <th className="table-title"></th>
            <th className="table-title">歌曲</th>
            <th className="table-title">歌手</th>
            <th className="table-title">时长</th>
          </tr>
          </thead>
          {/*注意:React中为了规范,在使用表格时请在对应的位置上加上对应标签*/}
          <tbody>
            {
              musicList.map((item,index)=>{
                return(
                  <tr className="music-item" key={index}>
                    <td style={{display:isShowBatchBtn?"inline-block":"none"}}><input className="music-checkbox" type="checkbox"/></td>
                    <td  className="sing-index-box">
                      <span className="sing-index">{index+1}</span>
                    </td>
                    <td>
                      <div className="music-name-box">
                        <img src="https://y.qq.com/music/photo_new/T002R300x300M000003jh8m13nL4IH_3.jpg?max_age=2592000" className="music-cover"/>
                        <span className="music-name">{item.musicName}</span>
                        <span className="music-btn music-play-btn iconfont">&#xe624;</span>
                        <span className="music-btn music-add-btn iconfont">&#xe84f;</span>
                      </div>
                    </td>
                    <td>
                      <span className="sing-name">{item.singName}</span>
                    </td>
                    <td>
                      <span className="timer">{item.timer}</span>
                    </td>
                  </tr>
                )
              })
            }
          </tbody>
        </table>
      </div>
    </RankingListStyle>
  );
});
